<template>
  <div>
    <!-- <h2>用户资料</h2> -->
    <van-nav-bar title="用户信息" left-arrow @click-left="onClickLeft"/>
    <div class="head">
      <div class="left">
        <span class="yuan"></span>
        <div class="yhm">
          <p>用户名</p>
          <p>狮子座-郑州-二七区</p>
          <p>6粉丝|0关注</p>
          <p>全能教练</p>
        </div>
      </div>
      <button class="btn" @click="fd($event)">{{tion}}</button>
    </div>
    <div class="jilu">
      <van-row type="flex" justify="space-around">
        <van-col span="5">
          <p>参与</p>
          <b>108天</b>
        </van-col>
        <van-col span="5">
          <p>完成</p>
          <b>333次</b>
        </van-col>
        <van-col span="5">
          <p>消耗</p>
          <b>3.2万卡</b>
        </van-col>
      </van-row>
    </div>
    <div>
      <div class="foot" @click="xldt()">
        <div class="footleft">
          <p>训练动态</p>
          <b>160</b>
        </div>
        <div class="footright">
          <span></span>
          <span></span>
          <b>></b>
        </div>
      </div>
      <div class="foot1" @click="xzq()">
        <div class="foot1left">
          <p>参与的咨询</p>
          <b>超过9秒素昂科，测试人体平衡</b>
          <em>2018.9.30</em>
        </div>
        <div class="footright">
          <span></span>
          <b>></b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Subscriber",
  data() {
    return {
      tion: "+关注"
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/frecommend");
    },
    fd(e) {
      console.log(e);
      this.tion = "已关注";
    },
    xldt(){
        this.$router.push('/wallpaper')
    },
    xzq(){
        this.$router.push('/medal')
    }
  }
};
</script>

<style scoped>
.head {
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  align-items: center;
}
.head .left {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  align-items: center;
}
.head .yuan {
  display: block;
  width: 49px;
  height: 49px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50%;
}
.head .yhm {
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  align-items: center;
}
.head .yhm p:nth-of-type(1) {
  height: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-regular;
}
.head .yhm p:nth-of-type(2) {
  color: rgba(155, 155, 155, 1);
  font-size: 12px;
  text-align: left;
  font-family: Arial-regular;
}
.head .yhm p:nth-of-type(3) {
  color: rgba(125, 125, 125, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-top: -6px;
}
.head .yhm p:nth-of-type(4) {
  color: rgba(151, 151, 151, 1);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-top: -6px;
}
.head .btn {
  width: 58px;
  height: 22px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
}
.jilu .van-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jilu .van-col p {
  font-size: 14px;
}
.jilu .van-col b {
  font-size: 18px;
  font-weight: normal;
}
.foot {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  margin-top: 22px;
  border-top: 1px solid #aaa;
  align-items: center;
}
.foot p {
  /* height: 20px; */
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-bottom: 0px;
}
.foot b {
  color: rgba(149, 149, 149, 1);
  font-size: 24px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: normal;
}
.foot span {
  display: block;
  height: 54px;
  width: 54px;
  border: 1px solid #aaa;
}
.footright {
  display: flex;
  align-items: center;
}

.foot1 {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  margin-top: 22px;
  border-top: 1px solid #aaa;
  align-items: center;
}
.foot1 p {
  color: rgba(57, 57, 57, 1);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-bottom: 0px;
}
.foot1 b {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: normal;
}
.foot1 em {
  color: rgba(176, 176, 176, 1);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-style: normal;
}
.foot1 span {
  display: block;
  height: 54px;
  width: 54px;
  border: 1px solid #aaa;
}
.footright b {
  color: rgba(149, 149, 149, 1);
  font-size: 24px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: normal;
}
</style>
